<template>
  <!-- 环境监控-历史 historyPopUp -->
  <div class="history-popup">
    <div class="form">
      <el-form ref="form" :model="form" label-width="1.2rem">
        <el-row>
          <el-col :span="12" :offset="2">
            <el-form-item label="监测时间:">
              <el-date-picker
                v-model="form.times"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-button type="primary" icon="el-icon-search" @click="initsearch">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="middle betweenbox">
      <div
        class="middle-left"
        v-loading="loading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table
          :data="tableData"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          border
          height="100%"
        >
          <!-- <el-table-column prop="NUM" label="序号" width="60"></el-table-column> -->
          <!-- <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column> -->
          <!-- <el-table-column prop="monitorType" :show-overflow-tooltip="true" label="监测类型"></el-table-column> -->
          <el-table-column prop="monitorTime" :show-overflow-tooltip="true" label="监测时间"></el-table-column>
          <el-table-column prop="value" :show-overflow-tooltip="true" label="监测值"></el-table-column>
          <el-table-column prop="state" :show-overflow-tooltip="true" label="状态">
            <template slot-scope="scope">
              <div
                :class="scope.row.state | collectionValueFilter"
              >{{ scope.row.state | zxjcState }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="middle-right">
        <div class="blueTitleStyle">{{monitorType}}</div>
        <div
          class="linechart"
          v-loading="loading2"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <v-chart :options="option" :auto-resize="true" @click="chartClick" />
        </div>
      </div>
    </div>
    <div class="foot centerbox elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 15, 20]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import time from "@/utils/time.js";
@Component({})
export default class extends Vue {
  public pickerOptions: any = {
    shortcuts: [
      {
        text: "本日",
        onClick(picker) {
          var now = new Date().getTime();
          var startTime = now - 3600 * 1000 * 24 * 1;
          console.log(new Date(startTime), new Date(now));
          picker.$emit("pick", [new Date(startTime), new Date(now)]);
        },
      },
      {
        text: "本周",
        onClick(picker) {
          const weekEnd = new Date().getTime();
          // const weekStart = (new Date().getDate(), 0);
          const weekStart = weekEnd - 3600 * 1000 * 24 * 7;
          picker.$emit("pick", [new Date(weekStart), new Date(weekEnd)]);
        },
      },
      {
        text: "本月",
        onClick(picker) {
          const monthEnd = new Date().getTime();
          // const monthStart = new Date().getMonth() - 1;
          const monthStart = monthEnd - 3600 * 1000 * 24 * 30;
          picker.$emit("pick", [new Date(monthStart), new Date(monthEnd)]);
        },
      },
    ],
  };
  @Prop() datas!: any;
  //table数据状态
  loading = false;
  //图表数据状态
  loading2 = false;
  monitorType: string = "";
  get nodata() {
    let nodata = false;
    if (this.tableData.length === 0 && !this.loading) {
      nodata = true;
    }
    return nodata;
  }
  get nodata2() {
    let nodata = false;
    if (this.option.xAxis.data.length === 0 && !this.loading2) {
      nodata = true;
    }
    return nodata;
  }
  //弹框from表单
  form: any = {
    times: [],
  };

  //分页数据事件相关
  pages = {
    pageSize: 10,
    page: 1,
    totalSize: 5,
  };

  search() {
    this.pages.page = 1;
    this.fetch();
  }
  //表格数据
  tableData = [
    // {
    //   interval: "#1主变",
    //   name: "#1主变氢气",
    //   Monitoring: "氢气",
    //   time: "2020/08/30 17:50",
    //   state: "正常",
    // },
  ];
  public option: any = {
    color: ["#2CACFB"],
    grid: {
      left: "5%",
      top: "10%",
      right: "6%",
      bottom: "12%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff",
        // interval: 0,
        rotate: 45,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(17,24,45,1)",
        },
      },
      data: [],
      // data: [
      //   "2020/2/5",
      //   "2020/2/6",
      //   "2020/2/7",
      //   "2020/2/8",
      //   "2020/2/9",
      //   "2020/2/10",
      //   "2020/2/11",
      // ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#466BC2",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "rgba(17,24,45,1)",
        },
      },
    },
    dataZoom: [
      {
        type: "slider",
        show: true,
        height: 20,
        right: "10%",
        left: "10%",
        bottom: "1%",
        start: 0,
        // end: 100,
        textStyle: {
          color: "#d4ffff",
          fontSize: 11,
        },
      },
      {
        type: "inside",
      },
    ],
    series: [
      {
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
        data: [],
        type: "line",
        showAllSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(34, 107, 229, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(34, 107, 229, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  @Watch("chartData", { immediate: true, deep: true })
  getBarData(newVal: any) {
    // console.log("newVal", newVal);
  }
  public chartClick(val: Object): void {
    // console.log(val);
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }

  mounted() {
    //当前时间
    var dataTime = new Date().getTime();
    (this as any).datatime = time(dataTime);
    var dataTime7 = dataTime - 3600 * 1000 * 24 * 7;
    (this as any).datatime7 = time(dataTime7);
    this.form.times.push((this as any).datatime7);
    this.form.times.push((this as any).datatime);
    this.fetch();
    this.echaInit();
  }

  initsearch() {
    this.pages.page = 1;
    this.fetch();
    this.echaInit();
  }

  fetch() {
    this.loading = true;
    var params = {
      endTime: this.form.times[1],
      pageNo: this.pages.page,
      pageSize: this.pages.pageSize,
      dwId: this.datas.id,
      startTime: this.form.times[0],
      interval: "",
    };
    if (this.form.times && this.form.times.length > 1) {
      params.endTime = this.form.times[1];
      params.startTime = this.form.times[0];
      if (this.form.times[0] == this.form.times[1]) {
        if (this.form.times[1]) {
          params.endTime = this.form.times[1].slice(0, 10) + " 23:59:59";
        } else {
          params.endTime = this.form.times[1].slice(0, 10);
        }
      }
    } else {
      params.endTime = "";
      params.startTime = "";
    }
    params.interval = this.addType(params);
    (this as any).$services
      .list({ data: params })
      .then((result: any) => {
        this.tableData = result.data.records;
        this.monitorType = this.tableData[0].monitorType;
        this.pages = {
          pageSize: result.data.size,
          page: result.data.current,
          totalSize: result.data.total,
        };
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }
  //  addType() {
  //     let type = "自定义222";
  //     let time = new Date(this.dataTime).getTime() - new Date(this.dataTime7).getTime();
  //     if (time === 1 * 1000 * 60 * 60 * 24) {
  //       type = "天222";
  //     } else if (time === 7 * 1000 * 60 * 60 * 24) {
  //       type = "周222";
  //     } else if (time === 30 * 1000 * 60 * 60 * 24) {
  //       type = "月222";
  //     }
  //     return type;
  //   }
  addType(arrData) {
    let type = "self";
    let time =
      new Date(arrData.endTime).getTime() -
      new Date(arrData.startTime).getTime();
    if (time >= 1 * 1000 * 60 * 60 * 24 && time < 2 * 1000 * 60 * 60 * 24) {
      type = "day";
    } else if (
      time >= 7 * 1000 * 60 * 60 * 24 &&
      time < 8 * 1000 * 60 * 60 * 24
    ) {
      type = "week";
    } else if (
      time >= 30 * 1000 * 60 * 60 * 24 &&
      time < 31 * 1000 * 60 * 60 * 24
    ) {
      type = "month";
    }
    return type;
  }
  get stationId() {
    return AuxiliaryMonitorModule.stationId;
  }

  echaInit() {
    this.loading2 = true;
    var fromEcha = {
      endTime: this.form.times[1],
      startTime: this.form.times[0],
      dwId: this.datas.id,
      stationId: this.stationId,
      interval: "",
    };
    if (this.form.times && this.form.times.length > 1) {
      fromEcha.endTime = this.form.times[1];
      fromEcha.startTime = this.form.times[0];
      if (this.form.times[0] == this.form.times[1]) {
        fromEcha.endTime = this.form.times[1].slice(0, 10) + " 23:59:59";
      }
    } else {
      fromEcha.endTime = "";
      fromEcha.startTime = "";
    }
    fromEcha.interval = this.addType(fromEcha);
    (this as any).$services
      .queryHistoryChart({ data: fromEcha })
      .then((result: any) => {
        if (result.data) {
          var dataName = [];
          var dataVal = [];
          let resdata = result.data.reverse();
          result.data.map((item) => {
            dataName.push(item.time);
            dataVal.push(item.val);
          });
          this.option.xAxis.data = dataName;
          this.option.series[0].data = dataVal;
          this.loading2 = false;
        }
      })
      .catch((err: object) => {
        // console.log(err);
        this.loading2 = false;
      });
  }
}
</script>

<style lang="scss" scoped>
.history-popup {
  //弹框样式
  width: 100%;
  height: 5.8rem;
  .form {
    height: 0.5rem;
  }
  .middle {
    width: 100%;
    height: calc(100% - 1rem);
    > div {
      width: calc(50% - 0.1rem);
      height: 100%;
    }
    .linechart {
      width: 100%;
      height: calc(100% - 0.27rem);
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
  .foot {
    width: 100%;
    height: 0.5rem;
  }
}
</style>
<style lang="scss">
.history-popup {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 1.9rem;
  }
  .el-form-item__label {
    font-size: 0.18rem;
  }
  .btn {
    font-size: 0.18rem;
  }
}
</style>
